<template>
  <!--.vue单文件主件-->
  <div class="home">
    <el-container>
      <el-header>
        <header-component :user-info="userInfo"></header-component>
      </el-header>

      <el-container>
        <el-aside width="auto">
          <el-menu router :unique-opened="true" class="el-menu-vertical-demo" :collapse="collapse">
            <menu-component :menu="menuList"></menu-component>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main >
            <div>
              <el-col :span="1" >
                <el-tooltip :content="collapse?'展开':'折叠'">
                  <i v-if="!collapse" class="el-icon-s-fold" @click="isCollapse" style="font-size: 20px;margin-top: -5px"></i>
                  <i v-if="collapse" class="el-icon-s-unfold" @click="isCollapse" style="font-size: 20px;margin-top: -5px"></i>
                </el-tooltip>
              </el-col>
              <breadcrumb-component></breadcrumb-component>
            </div>
            <router-view/>
          </el-main>
          <el-footer style="height: 35px">
            <footer-component></footer-component>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import MenuComponent from "@/components/MenuComponent";
import BreadcrumbComponent from "@/components/BreadcrumbComponent";
import FooterComponent from "@/components/FooterComponent";
import HeaderComponent from "@/components/HeaderComponent";

export default {
  name: 'Home',
  // 在当前页面声明,我将会引用哪些组件
  components: {
    HeaderComponent,
    FooterComponent,
    MenuComponent,
    BreadcrumbComponent
  },
  data: function () {
    return {
      collapse: false,
      menu: [],
      menuList: [],
      userInfo: [],
      company: '',
      getDate: [],

    }
  },
  mounted() {
  },
  created() {
    this.initMenu();
    this.user();
  },
  methods: {
    initMenu() {
      let menu = sessionStorage.getItem('menu');
      menu = JSON.parse(menu);
      this.menu = menu;
      let menuList = [];
      let map = {}
      this.menu.sort((a, b) => a.pid - b.pid)
      this.menu.forEach(res => {
        res.children = []
        map[res.id] = res
        if (!res.pid) {
          menuList.push(res)
        } else {
          if (map[res.pid]) {
            map[res.pid].children.push(res)
          }
        }
      })
      this.menuList = menuList
    },
    isCollapse(){
      this.collapse = !this.collapse
    },
    user() {
      let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.userInfo = userInfo;
      this.name = userInfo.name
    }
  }
}
</script>

<style lang="scss">
.home{
  overflow: auto;
  height:100vh;
  display: -webkit-flex;
  -webkit-flex-direction: column;
}
.el-footer {
  background: #474747;
  color: #333;
  text-align: center;
  line-height: 30px;
  //height: 35px;
  border-top: 1px solid gray !important;
  border-collapse: collapse;
}

.el-header {
  color: #333;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #aaaaaa !important;
  border-collapse: collapse;
}

.el-aside {
  background-color: #f5f4f4;
  color: #333;
  text-align: center;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
}

.el-menu:not(.el-menu--collapse){
  /* 控制菜单宽度保持动画不变 */
  width: 200px;
}

.el-menu-item.is-active {
  background-color: #409EFF !important;
  color: #fff;
}

.el-table td, .el-table th {
  padding: 9px 0;
}

body > .el-container {
  margin-bottom: 40px;
}

</style>
